<template>
  <div class="app-views">
    <div
      class="item-box"
      v-loading="loading"
      style="border-right: 1px dashed #e6e6e6"
    >
      <div class="sub-title">
        <i
          class="iconfont icon-list"
          style="margin-right: 5px; font-weight: bold"
        ></i>
        <div class="Title">设备列表</div>
      </div>
      <div class="device-list">
        <DCard
          :dName="item.name"
          :isCheck="isCheckCard == item.value"
          @click.native="handlerisCheck(item)"
          v-for="(item, index) in kongLine"
          :key="index"
          :status="deviceList[index]"
        />
      </div>
    </div>
    <div class="device-views">
      <div class="sub-title">
        <i class="iconfont icon-shebeituceng-" style="margin-right: 5px"></i>
        <div class="Title">设备图</div>
      </div>
      <div class="device-img">
        <div class="device-img-rec">
          <div class="img-box">
            <img src="@/assets/images/kongLine.png" alt="" />
          </div>
          <div class="deviceStatus">
            <div class="title">
              设备状态
              <i
                class="el-icon-edit"
                @click="openParamSet"
                v-hasPermi="['assembly:device:edit']"
              ></i>
            </div>
            <div class="list" v-loading="showDeviceStatus.length == 0">
              <div class="item" v-for="item in showDeviceStatus" :key="item.id">
                <div class="descript">
                  <span class="note"> {{ item.note }}</span>
                  <span class="value">
                    {{ item.message }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="signal">
          <div class="sub-title">
            <i
              class="iconfont icon-PLCxinhaoganzhizhongduan"
              style="margin-right: 5px"
            ></i>
            <div class="Title">信号列表</div>
          </div>
          <div class="signal-table">
            <el-table :data="tableData" style="width: 100%" height="100%">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column
                prop="cmd"
                label="指令内容"
                width="200"
                show-overflow-tooltip
              />
              <el-table-column
                prop="cmdType"
                label="命今类型"
                show-overflow-tooltip
              />
              <el-table-column prop="createTime" label="时间" width="150">
                <template slot-scope="scope">
                  {{ scope.row.createTime.substr(10) }}
                </template>
              </el-table-column>
              <el-table-column label="完成状态" width="100">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state | tagType">{{
                    scope.row.state | status
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-close"
                    type="text"
                    v-if="!scope.row.state"
                    v-hasPermi="['assembly:device:edit']"
                    @click="handlerCmd('fallbackAction', scope.row)"
                    >取消</el-button
                  >
                  <el-button
                    icon="el-icon-check"
                    type="text"
                    v-hasPermi="['assembly:device:edit']"
                    v-if="!scope.row.state"
                    @click="handlerCmd('executionCompleted', scope.row)"
                    >完成</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <LogView :jobGroup="12" :isShow="isShow" />
    </div>
    <el-drawer title="设备参数" :visible.sync="drawer" :direction="direction">
      <div
        class="params"
        v-if="deviceParams != null"
        v-loading="loadDeviceParam"
      >
        <!-- <div class="param_item_W">
          <div class="paramsName">是否自动接收</div>
          <div class="paramView">
            <el-radio-group v-model="deviceParams.object.use">
              <el-radio :label="true">开启</el-radio>
              <el-radio :label="false">关闭</el-radio>
            </el-radio-group>
          </div>
        </div> -->
        <div class="param_item_W">
          <div class="paramsName">是否启用强制除膜宽度</div>
          <div class="paramView">
            <el-radio-group
              v-model="deviceParams.object.forceMembraneRemovaWidth"
            >
              <el-radio :label="true">开启</el-radio>
              <el-radio :label="false">关闭</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div
          class="param_item_W"
          v-if="deviceParams.object.forceMembraneRemovaWidth"
        >
          <div class="paramsName">强制除膜宽度指定</div>
          <div class="paramView">
            <span
              v-show="forceWidth"
              @click.stop="handlerSpace('forceWidth')"
              >{{ deviceParams.object.forceWidth }}</span
            >
            <el-input-number
              v-show="!forceWidth"
              size="mini"
              ref="forceWidth"
              v-model="deviceParams.object.forceWidth"
              @blur="handlerSpace('forceWidth')"
            ></el-input-number>
          </div>
        </div>
        <div class="param_item_W">
          <div class="paramsName">最大高度</div>
          <div class="paramView">
            <span v-show="maxHeight" @click.stop="handlerSpace('maxHeight')">{{
              deviceParams.object.maxHeight
            }}</span>
            <el-input-number
              v-show="!maxHeight"
              size="mini"
              ref="maxHeight"
              v-model="deviceParams.object.maxHeight"
              @blur="handlerSpace('maxHeight')"
            ></el-input-number>
          </div>
        </div>
        <div class="param_item_W">
          <div class="paramsName">最大宽度</div>
          <div class="paramView">
            <span v-show="maxWidth" @click.stop="handlerSpace('maxWidth')">{{
              deviceParams.object.maxWidth
            }}</span>
            <el-input-number
              v-show="!maxWidth"
              size="mini"
              ref="maxWidth"
              v-model="deviceParams.object.maxWidth"
              @blur="handlerSpace('maxWidth')"
            ></el-input-number>
          </div>
        </div>
        <div class="param_item_W">
          <div class="paramsName">最大玻璃显示数量</div>
          <div class="paramView">
            <span v-show="showGlassNum" @click.stop="handlerSpace('showGlassNum')">{{
              deviceParams.object.showGlassNum
            }}</span>
            <el-input-number
              v-show="!showGlassNum"
              size="mini"
              ref="showGlassNum"
              v-model="deviceParams.object.showGlassNum"
              @blur="handlerSpace('showGlassNum')"
            ></el-input-number>
          </div>
        </div>
        <div class="param_item_W">
          <div class="paramsName">除膜规则</div>
          <div class="paramView" style="width: 150px">
            <el-select
              v-model="deviceParams.object.membraneRemovalRule"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="(item, index) in ruleList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="param_item_W">
          <div class="paramsName">除膜面</div>
          <div class="paramView" style="width: 165px">
            <el-checkbox-group
              v-model="deviceParams.object.membraneRemovalZkABs"
            >
              <el-checkbox
                v-for="(item, index) in ['A', 'B', 'C', 'D']"
                :key="index"
                :label="item"
                :value="item"
                :disabled="deviceParams.object.membraneRemovalRule == 0"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- <div class="param_item_W">
          <div class="paramsName">出片顺序</div>
          <div class="paramView" style="width: 150px">
            <el-select
              v-model="deviceParams.object.order"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="(item, index) in orderList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div> -->
        <div class="param_item_W gridBox">
          <div class="paramsName gridHeader">
            <div>使用格号</div>
            <div style="display: flex; align-items: center; margin-left: auto">
              <div
                style="
                  width: 10px;
                  height: 10px;
                  background-color: #409eff;
                  margin-right: 3px;
                "
              ></div>
              使用
            </div>
            <div style="display: flex; align-items: center; margin-left: 5px">
              <div
                style="
                  width: 10px;
                  height: 10px;
                  background-color: #a6a9ad;
                  margin-right: 3px;
                "
              ></div>
              禁用
            </div>
          </div>
          <div class="checkBoxGroup">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-if="[0, 1, 2].includes(isCheckCard)"
                :indeterminate="
                  checkFillArrayExit(50, deviceParams.object.canUseGrid) != 0 &&
                  checkFillArrayExit(50, deviceParams.object.canUseGrid) != 50
                "
                :label="50"
                >1-50</el-checkbox
              >
              <el-checkbox
                v-if="[0, 1, 2].includes(isCheckCard)"
                :indeterminate="
                  checkFillArrayExit(100, deviceParams.object.canUseGrid) !=
                    0 &&
                  checkFillArrayExit(100, deviceParams.object.canUseGrid) != 50
                "
                :label="100"
                >51-100</el-checkbox
              >
              <el-checkbox
                v-if="[3].includes(isCheckCard)"
                :indeterminate="
                  checkFillArrayExit(100, deviceParams.object.canUseGrid) !=
                    0 &&
                  checkFillArrayExit(100, deviceParams.object.canUseGrid, 30) !=
                    30
                "
                :label="100"
                >70-100</el-checkbox
              >
              <el-checkbox
                :indeterminate="
                  checkFillArrayExit(150, deviceParams.object.canUseGrid) !=
                    0 &&
                  checkFillArrayExit(150, deviceParams.object.canUseGrid) != 50
                "
                :label="150"
                >101-150</el-checkbox
              >
              <el-checkbox
                :indeterminate="
                  checkFillArrayExit(200, deviceParams.object.canUseGrid) !=
                    0 &&
                  checkFillArrayExit(200, deviceParams.object.canUseGrid) != 50
                "
                :label="200"
                >151-200</el-checkbox
              >
              <el-checkbox
                :indeterminate="
                  checkFillArrayExit(250, deviceParams.object.canUseGrid) !=
                    0 &&
                  checkFillArrayExit(250, deviceParams.object.canUseGrid) != 50
                "
                :label="250"
                >201-250</el-checkbox
              >
              <el-checkbox
                :indeterminate="
                  checkFillArrayExit(300, deviceParams.object.canUseGrid) !=
                    0 &&
                  checkFillArrayExit(300, deviceParams.object.canUseGrid) != 50
                "
                :label="300"
                >251-300</el-checkbox
              >
              <el-checkbox
                v-if="[1, 2, 3].includes(isCheckCard)"
                :indeterminate="
                  checkFillArrayExit(323, deviceParams.object.canUseGrid, 23) !=
                    0 &&
                  checkFillArrayExit(323, deviceParams.object.canUseGrid, 23) !=
                    23
                "
                :label="323"
                >301-323</el-checkbox
              >
              <el-checkbox
                v-if="[1, 2, 3].includes(isCheckCard)"
                :indeterminate="
                  checkFillArrayExit(346, deviceParams.object.canUseGrid, 23) !=
                    0 &&
                  checkFillArrayExit(346, deviceParams.object.canUseGrid, 23) !=
                    23
                "
                :label="346"
                >323-346</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="paramView">
            <div
              class="grid"
              v-for="item in gridRange[isCheckCard]"
              :key="item"
              :class="
                deviceParams.object.canUseGrid.includes(item)
                  ? 'gridActive'
                  : ''
              "
              @click="handlerCheckGrid(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="footer">
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="handlerEditDevice('deviceParams')"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import DCard from "@/views/components/production/dCard.vue";
import LogView from "@/views/components/production/logViews.vue";
import { kongLine } from "../Config/label";
import mixin from "../mixin/index";
import { kongLineDB } from "@/config/db";
import { mapState } from "vuex";
import { deviceEditParam } from "@/api/assembly/device";
import {
  comparabelArray,
  checkFillArrayExit,
  intervalNumber,
} from "@/utils/index";
export default {
  components: {
    DCard,
    LogView,
  },
  props: {},
  mixins: [mixin],
  data() {
    return {
      kongLine,
      isCheckCard: 0,
      loading: false,
      isShow: false,
      tableData: [],
      device: null,
      drawer: false,
      drawerCat: false,
      deviceParams: null,
      underCatParams: null,
      direction: "rtl",
      loadDeviceParam: true,
      maxWidth: true,
      maxHeight: true,
      forceWidth: true,
      showGlassNum:true,
      selectCat: 0,
      orderList: [
        {
          label: "不限",
          value: 0,
        },
        {
          label: "从大到小",
          value: 1,
        },
        {
          label: "从小到大",
          value: 2,
        },
      ],
      dynamicTags: ["标签一", "标签二", "标签三"],
      ruleList: [
        {
          label: "按系统配置",
          value: 0,
        },
        {
          label: "强制除膜",
          value: 1,
        },
      ],
      checkList: [],
    };
  },
  watch: {
    checkList: {
      handler(newValue, oldValue) {
        const arr = comparabelArray(oldValue, newValue);
        const isIncrease = oldValue.length > newValue.length ? false : true;
        let number = arr[0] > 300 ? arr[0] - 23 : arr[0] - 50;
        if (isIncrease) {
          for (let i = arr[0]; i > number; i--) {
            if (!this.deviceParams.object.canUseGrid.includes(i)) {
              this.deviceParams.object.canUseGrid.push(i);
            }
          }
        } else {
          for (let i = arr[0]; i > number; i--) {
            let indexOf = this.deviceParams.object.canUseGrid.indexOf(i);
            indexOf != -1
              ? this.deviceParams.object.canUseGrid.splice(indexOf, 1)
              : null;
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    checkFillArrayExit,
    handlerCheckGrid(item) {
      let canUseGrid = this.deviceParams.object.canUseGrid;
      let indexOf = canUseGrid.indexOf(item);
      indexOf == -1 ? canUseGrid.push(item) : canUseGrid.splice(indexOf, 1);
      this.handlerCheckisValue(item, item > 300 ? 23 : 50);
    },
    handlerCheckisValue(item, grid = 50) {
      let canUseGrid = this.deviceParams.object.canUseGrid;
      let num = intervalNumber(item, [50, 100, 150, 200, 250, 300, 323, 346]);
      let total = checkFillArrayExit(num, canUseGrid, grid);
      if (total == grid) {
        this.checkList.push(num);
      }
      if (total == 0) {
        let indexOf = this.checkList.indexOf(num);
        indexOf != -1 && this.checkList.splice(this.checkList.indexOf(num), 1);
      }
    },
    handleClose(tag) {
      this.deviceParams.object.rwdidNoList.splice(
        this.deviceParams.object.rwdidNoList.indexOf(tag),
        1
      );
    },
    handlerSpace(e) {
      this[e] = !this[e];
      this.$nextTick(() => {
        !this[e] && this.$refs[e].focus();
      });
    },
    handlerEditDevice(e) {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          let arr = [3];
          this[e].object.canUseGrid = arr.includes(this.isCheckCard)
            ? this[e].object.canUseGrid.filter((item) => item >= 70)
            : this[e].object.canUseGrid;
          delete this[e].object.rwdidNoList;
          deviceEditParam(this[e]).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改设备状态成功");
              this.drawer = false;
              this.drawerCat = false;
              this.initData();
            } else {
              this.$message.error("修改设备状态失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // index 选中的card
    handlerisCheck(item) {
      this.isCheckCard = item.value;
      this.device = item;
      this.checkList = [];
      this.getDeviceSignal();
    },
    async openParamSet() {
      this.drawer = true;
      this.initData();
    },
    async initData() {
      this.loadDeviceParam = true;
      let paramList = [
        {
          name: "中空线",
          id: kongLine[this.isCheckCard].id,
        },
      ];
      await this.$store.dispatch("getDeviceMap", paramList);
      this.deviceParams =
        this.deviceParamsList.length == 0 ? null : this.deviceParamsList[0];
      this.handlerInitCheckBox();
      this.loadDeviceParam = false;
    },
    handlerInitCheckBox() {
      let a = [50, 100, 150, 200, 250, 300, 323, 346];
      a.forEach((item) => {
        this.handlerCheckisValue(item, item > 300 ? 23 : 50);
      });
    },
  },
  created() {
    this.device = kongLine[this.isCheckCard];
    this.getSignal(kongLineDB);
  },
  destroyed() {},
  computed: {
    ...mapState({
      deviceParamsList: (state) => state.deviceStatus.deviceParams,
    }),
    showDeviceStatus() {
      if (this.deviceList.length == 0) return [];
      return this.deviceList[this.isCheckCard].plcSignals;
    },
    isDisable() {
      if (this.isCheckCard == 2 || this.isCheckCard == 3) return true;
      return false;
    },
    isDisableA27() {
      if (this.isCheckCard == 2) return true;
      return false;
    },
    isDisableGLST() {
      if (this.isCheckCard == 3) return true;
      return false;
    },
    gridRange() {
      let gridArr = [[], [], [], [], [], []];
      let map = {
        0: [1, 300],
        1: [1, 346],
        2: [1, 346],
        3: [70, 346],
      };
      for (let key in map) {
        for (let i = map[key][0]; i <= map[key][1]; i++) {
          gridArr[key].push(i);
        }
      }
      return gridArr;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../style/index.less");
/deep/ .el-checkbox {
  margin-right: 10px;
  .el-checkbox__label {
    padding-left: 5px;
  }
}
img {
  width: 99%;
  height: 99%;
}
.param_item_W {
  display: flex;
  flex-direction: row;
}
.select {
  min-height: 40px;
  display: flex;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 5%);
  cursor: pointer;
  .underCat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
  }

  .active {
    background: linear-gradient(#fafafa, #1890ff);
  }
}

.params {
  display: flex;
  flex-direction: column;
  height: 100%;

  .paramsName {
    min-height: 30px;
    padding: 0px 10px;
    display: flex;
    font-size: 16px;
    align-items: center;
  }

  .paramView {
    min-height: 40px;
    max-width: 100%;
    display: flex;
    align-items: center;
    padding: 0px 0px 0px 10px !important;
    margin-left: auto;
    flex-wrap: wrap;

    span {
      cursor: pointer;
    }

    .grid {
      width: 5.15%;
      height: 30px;
      background-color: #a6a9ad;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      margin-right: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .gridActive {
      background-color: #409eff;
    }
  }
  .gridBox {
    flex-direction: column;
  }
  .gridHeader {
    display: flex;
    flex-wrap: wrap;
  }
  .checkBoxGroup {
    padding: 0px 0px 0px 10px;
    display: flex;
  }
}
</style>
